<template>
  <div class="container bookingList">
    <cube-scroll ref="scroll">
      <ul class="booking-list">
        <div class="select-hospital">
          <em class="place-holder" :style="{color:hospital_id==''?'#f64665':'#888888' }">选择医院</em>
          <cube-select
            v-model="hospital_id"
            :options="hospitalList"
            title="请选择医院"
            placeholder
            @change="selectHospital()"
          ></cube-select>
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
        </div>

        <date-selection @selectDate="selectDate"></date-selection>

        <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" />

        <!-- <div class="nothing" v-if="bookingListData.length==0">暂时没有预约单</div> -->
        <div class="nothing" v-if="false">暂时没有预约单</div>
        <div v-else class="ulbox">
          <!-- 数据列表 -->
          <li
            class="booking-item"
            v-for="(item, index) in bookingListData"
            :key="index"
            @click="tips(item)"
          >
            <router-link :to="'/bookingDetail:'+item.id">
              <div class="top1">
                <div class="left1 ml_10">
                  <span>预约编号:</span>
                  <span>{{item.order_sn}}</span>
                  <!-- 预约编号：{{item.order_sn}} -->
                  <em class="tips" v-if="item.type>3 && item.type<=5">（秒杀项目）</em>
                </div>
                <div class="left1 mr_28">{{item.order_status==1?"正在预约":"预约已关闭"}}</div>
                <div>
                  <div v-if="item.appointment_type==1" class="cardbtn">女王卡预约</div>
                  <div v-if="item.appointment_type==2" class="cardbtn">青春卡预约</div>
                  <div v-if="item.appointment_type==3" class="cardbtn">轻颜卡预约</div>
                  <div v-if="item.appointment_type==10" class="cardbtn">邀请有礼</div>
                  <div
                    v-if="item.appointment_type==11 && item.c2c_goods_name"
                    class="cardbtn"
                  >{{item.c2c_goods_name}}</div>
                </div>
              </div>
              <!-- <div class="top clearfix pos">
                <span class="left">
                  预约编号：{{item.order_sn}}
                  <em class="tip" v-if="item.type>3 && item.type<=5">（秒杀项目）</em>
                </span>
                <span class="left topleft">{{item.order_status==1?"正在预约":"预约已关闭"}}</span>

                <div v-if="item.appointment_type==1" class="cardbtn">女王卡预约</div>
                <div v-if="item.appointment_type==2" class="cardbtn">青春卡预约</div>
                <div v-if="item.appointment_type==3" class="cardbtn">轻颜卡预约</div>
                <div v-if="item.appointment_type==10" class="cardbtn">邀请有礼</div>
                <div
                  v-if="item.appointment_type==11 && item.c2c_goods_name"
                  class="cardbtn"
                >{{item.c2c_goods_name}}</div>
              </div>-->
              <div class="bottom clearfix">
                <div class="left">
                  <img :src="imgUrl+item.project_image" alt />
                </div>
                <div class="right clearfix">
                  <div class="bottom-top">
                    <h3>{{item.project_name}}</h3>
                    <p>{{item.hospital_name}}</p>
                  </div>
                  <div class="bottom-bottom">
                    <p>{{item.user.realname}} (来源：{{item.type==1?'app':'微信小程序'}})</p>
                    <p>预约日期：{{item.order_time_string}}</p>
                  </div>
                </div>
              </div>
            </router-link>
          </li>
        </div>
      </ul>
    </cube-scroll>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import dateSelection from "@/components/date/dateSelection";
import api from "../../assets/js/api";
export default {
  data() {
    return {
      bookingListData: [],
      hospitalList: [],
      hospital_id: "",
      //默认是筛选今天
      curDate: new Date().Format("yyyy-MM-dd"),

      //nav bar
      current: "正常",
      labels: ["正常", "全款"]
    };
  },
  methods: {
    getData(hospitalid = "", date = "") {
      let dataLoading = this.loading("加载中", 10000);
      dataLoading.show();
      //当前选中的nav bar
      let current = this.current;
      let requestData = {
        hospital_id: hospitalid,
        start_date: this.curDate,
        end_date: this.curDate,
        type: 1
      };

      //筛选制定日期
      if (date) {
        (requestData.start_date = date), (requestData.end_date = date);
      }

      //类型筛选  默认是普通的
      if (current == "全款") {
        requestData.type = 2;
      }

      this.axios
        .post("/api/butler/order_list", requestData)
        .then(response => {
          let res = response.data;
          dataLoading.hide();
          if (res.code == 200) {
            // console.log(res.data)
            if (res.data.length > 0) {
              this.bookingListData = res.data;
              this.bookingListData.forEach(val => {
                val.order_time_string = new Date(val.order_time * 1000).Format(
                  "yyyy-MM-dd"
                );
              });
            } else {
              //某个筛选条件 没有可展示内容
              this.bookingListData = [];
            }
          } else if (res.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        })
        .catch(error => {
          dataLoading.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    getHospitalList() {
      this.hospital_id = "";
      let list;
      // console.log(localStorage.hospital_list)
      if (localStorage.hospital_list) {
        list = JSON.parse(localStorage.hospital_list);
      }
      console.log('list',list)
      if (list.length > 0) {
        list.forEach(element => {
          element.text = element.name;
          element.value = element.id;
        });
        this.hospitalList = list;
      }
    },
    selectHospital() {
      this.getData(this.hospital_id);
    },
    //子组件传递过来的时间筛选
    selectDate(date) {
      //每次选择日期后充值bar框为 正常预约单
      this.current = "正常";

      this.curDate = date;
      this.getData(this.hospital_id);
      console.log(date);
    },
    tips(item) {
      if (item.order_status != 1) {
        Toast({
          message: "预约单已关闭",
          position: "bottom",
          duration: 2000
        });
      }
    },

    changeHandler(data) {
      this.current = data;

      this.getData(this.hospital_id);
      console.log(this.current, "切换tab框，并请求完毕");
    }
  },
  created() {
    this.axios.defaults.baseURL = api;
    this.getHospitalList();
    this.getData();
    // console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
  },
  components: {
    // 时间选择组件
    dateSelection
  },
  mounted() {
    // console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: rgba(204, 204, 204, 0.2018);
  width: 100%;
  min-height: 100%;
  overflow: auto;
  .nothing {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 17px;
    padding-top: 50%;
    color: #666;
  }
  .booking-list {
    width: 100%;
    padding-bottom: 80px;
    padding-top: 50px;
    position: relative;
    .select-hospital {
      height: 44px;
      line-height: 44px;
      width: 100%;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      .cube-select {
        margin-top: 2px;
        text-align: right;
        padding-right: 30px;
        font-size: 14px;
        color: #f64665;
        &::after {
          border: none;
        }
      }
      .place-holder {
        font-size: 14px;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
      }
    }
    .booking-item {
      min-height: 200px;
      background-color: #fff;
      margin-bottom: 10px;
      position: relative;
      a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 15px 15px;
        box-sizing: border-box;
        .top {
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
          .left,
          .right {
            height: 100%;
            font-size: 14px;
            color: #666;
          }
          .left {
            float: left;
            .tip {
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(246, 70, 101, 1);
            }
          }
          .right {
            float: right;
          }
        }
        .bottom {
          padding-top: 15px;
          display: flex;
          .left {
            background-color: #ccc;
            float: left;
            flex: 1;
            min-height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            position: relative;
            float: right;
            background: rgba(204, 204, 204, 0.1);
            flex: 2;
            .bottom-top,
            .bottom-bottom {
              position: absolute;
              left: 15px;
              font-size: 14px;
            }
            .bottom-top {
              top: 0;
              h3 {
                font-size: 17px;
                font-weight: bolder;
                line-height: 24px;
                margin-top: 0px;
                font-family: "PingFangSC-Medium";
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .bottom-bottom {
              bottom: 0px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="less" scope>
.bookingList {
  .cube-select-icon {
    border: 0 !important;
  }
  .select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    z-index: 10;
    color: #f64665;
  }
}

/* 以下为UI组件样式调整 */
.cube-scroll-wrapper {
  position: relative;
  height: 100%;
  overflow: scroll;
}
.cube-scroll-nav-bar {
  height: 56px;
}
.cube-scroll-content {
  width: 100%;
}
.cube-scroll-nav-bar-item {
  width: 50%;
  span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}

.cube-scroll-nav-bar-item_active {
  span {
    border-bottom: 2px solid rgba(255, 132, 165, 1);
    color: rgba(255, 132, 165, 1);
  }
}
.topleft {
  margin-left: 10px;
}
.pos {
  position: relative;
}
.queenCardLogos {
  font-size: 14px;
  position: absolute;
  right: 0px;
  display: block;
  height: 25px;
  line-height: 25px;
  color: white;
  padding: 2px 8px;
  border-radius: 14px;
  margin-top: 12px;
}
.queenCardLogos1 {
  background: #fb309b;
}
.queenCardLogos2 {
  background: #fe6b2d;
}
.queenCardLogos3 {
  background: #b025e9;
}
.cardbtn {
  // position: absolute;
  // right: 0px;
  max-width: 68px;
  height: 25px;
  line-height: 25px;
  border-radius: 12px;
  text-align: center;
  padding: 2px 6px;
  font-size: 14px;
  color: #fff;
  background: #ff84a5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // margin-top: 12px;
  box-sizing: border-box;
}
.top1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // flex-wrap: nowrap;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.left1 {
  color: #666;
  font-size: 14px;
}
.ml_10 {
  max-width: 183px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}
.mr_28 {
  // display: flex;
  // flex-wrap: nowrap;
  max-width: 70px;
  margin-right: 28px;
  box-sizing: border-box;
}
.tips {
  font-size: 12px;
  font-family: "PingFangSC-Regular";
  font-weight: 400;
  color: rgba(246, 70, 101, 1);
}
</style>



